<template>
	<view>
		<view class="uni-header">
			<uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
		</view>
		<view class="uni-container">
			<uni-notification-center class="main" ref="unc"></uni-notification-center>
		</view>
	</view>
</template>

<script>
	import uncUtils from '@/uni_modules/uni-notification-center/utils/main.js';
	export default {
		data() {
			return {
				unreadCount: ''
			}
		},
		onReachBottom() {
			this.$refs.unc.loadData()
			// console.log('onReachBottom');
		},
		onPullDownRefresh() {
			// console.log('onPullDownRefresh');
			this.$refs.unc.refresh(() => {
				uni.stopPullDownRefresh()
			})
		},
		onNavigationBarButtonTap() {
			this.$refs.unc.clearAllUnRead()
		},
		async onLoad() {
			uncUtils.bindUnreadCount(unreadCount => {
				this.unreadCount = unreadCount
				if (unreadCount) {
					uni.setTabBarBadge({
						index: 1,
						text: unreadCount.toString()
					})
				} else {
					uni.removeTabBarBadge({
						index: 1
					})
				}
			})
		},
		methods: {}
	}
</script>

<style>
	.main {
		border-radius: 4px;
		box-shadow: -1px -1px 5px 0 rgb(0 0 0 / 10%);
		margin-bottom: 15px;
		padding: 15px;
	}
	.main ::v-deep .main-container{
		min-height: 200px;
	}
</style>
